<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { computed } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'GDMButton',
})

const classPrefix = 'st-button'

export interface ButtonProps {
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
  fill?: 'solid' | 'outline' | 'none'
  size?: 'mini' | 'small' | 'middle' | 'large'
  block?: boolean
  loading?: boolean
  loadingText?: string
  disabled?: boolean
  onClick?: (event: MouseEvent) => void
  className?: string
  style?: CSSProperties
  type?: 'submit' | 'reset' | 'button'
  shape?: 'default' | 'round'
}
const props = withDefaults(defineProps<ButtonProps>(), {
  color: 'default',
  fill: 'solid',
  block: false,
  loading: false,
  type: 'button',
})

const disabled = computed(() => props.disabled || props.loading)

const buttonClasses = computed(() => [
  classPrefix,
  props.color ? `${classPrefix}-${props.color}` : null,
  {
    [`${classPrefix}-block`]: props.block,
    [`${classPrefix}-disabled`]: disabled.value,
    [`${classPrefix}-fill-outline`]: props.fill === 'outline',
    [`${classPrefix}-fill-none`]: props.fill === 'none',
    [`${classPrefix}-mini`]: props.size === 'mini',
    [`${classPrefix}-small`]: props.size === 'small',
    [`${classPrefix}-large`]: props.size === 'large',
    [`${classPrefix}-loading`]: props.loading,
    [`${classPrefix}-round`]: props.shape === 'round',
  },
  props.className,
])

const handleClick = (event: MouseEvent) => {
  props.onClick?.(event)
}
</script>

<template>
  <button
    :type="type"
    :class="buttonClasses"
    :style="style"
    :disabled="disabled"
    @click="handleClick"
  >
    <template v-if="loading">
      <div :class="`${classPrefix}-loading-wrapper`">
        <LoadingOutlined :style="{ color: 'currentColor' }" />
        {{ loadingText }}
      </div>
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </button>
</template>

<style lang="scss">
@import '../../styles/button/index';
</style>
